<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>小米商城</title>
		<link rel="stylesheet" href="layout.css" />
	</head>
	<body>
		<!-- 导航条开始 -->
		<div class="black-nav">
			<div class="wrap">
				<div class="nav-left">
				<a href="#">小米官网</a>
				<a href="#">小米商城</a>
				<a href="#">小米澎湃os</a>
				<a href="#">小米汽车</a>
				<a href="#">云服务</a>
				<a href="#">loT</a>
				<a href="#">有品</a>
				<a href="#">小爱开放平台</a>
				<a href="#">资质证照</a>
				<a href="#">协议规则</a>
				<a href="#">下载app</a>
				<a href="#">select location</a>
				</div>
				<div class="nav-right">
					<a href="#">登录</a>
					<a href="#">注册</a>
					<a href="#">消息通知</a>
					<a href="#">购物车</a>
				</div>
			</div>
		</div>
		<!-- 导航条结束 -->
		<!-- logo部分开始 -->
		<div class="header">
		<div class="continer">
		<div class="logo">
			<img src="img/16942481297445784.jpg" alt="logo" />
		</div>
		<div class="header-left">
			<a href="#">xiaomi手机</a>
			<a href="#">Redni手机</a>
			<a href="#">电视</a>
			<a href="#">笔记本</a>
			<a href="#">平板</a>
			<a href="#">家电</a>
			<a href="#">路由器</a>
			<a href="#">服务中心</a>
			<a href="#">社区</a>
		</div>
		<div class="search">
			<input type="text" placeholder="手机" value=""/>
		</div>
		</div>
		</div>
		<!-- logo部分结束 -->
		<!-- 轮播图部分开始 -->
		<div class="lunbo">
			<div class="lunbo-continer"><!-- 中间 开始-->
				<div class="site-box">
					<ul class="site-nav">
						<li><a href="#">手机 
							</a>
							<i>></i></li>
						<li><a href="#">电视
						 </a><i>></i>
						 </li>
						<li><a href="#">家电
						  </a><i>></i></li>
						<li><a href="#">笔记本 平板
						 </a><i>></i></li>
						<li><a href="#">出行 穿戴
		                  </a><i>></i></li>
						<li><a href="#">耳机 音箱
						  </a><i>></i></li>
						<li><a href="#">健康 儿童
						</a><i>></i></li>
						<li><a href="#">生活 箱包
						   </a><i>></i></li>
						<li><a href="#">智能 路由器
					    </a><i>></i></li>
						<li><a href="#">电源 配件
					  </a><i>></i></li>
					</ul>
				</div>
				<a href="https://www.xiaomiev.com/">
					<img src="img/米.jpg" alt="mi"  />
				</a>
			</div> <!-- 中间结束 -->
			<div class="lunbo-b"> <!-- 底部开始 -->
				<div class="b-l"> <!-- 左边开始 -->
					<ul class="box">
					<li><a href="#">
					<img src="img/zhong.png" alt="保障服务" />
					保障服务</a></li>
					<li>
						<a href="#">
							<img src="img/qiye.png" alt="企业团购" />
						企业团购</a>
					</li>
					<li>
						<a href="#">
							<img src="img/F.png" alt="F码通道" />
						F码通道</a></li>
					<li>
						<a href="#">
							<img src="img/mi.png" alt="米粉卡" />
						米粉卡</a></li>
					<li>
						<a href="#"><img src="img/huan.png" alt="以旧换新" />
						以旧换新</a>
					</li>
					<li>
						<a href="#"><img src="img/huafei.png" alt="话费充值" />
						话费充值</a>
					</li>
					</ul>
				</div> <!-- 左边结束 -->
				<div class="b-r"> <!-- 右边开始 -->
				<ul class="box2">
				<li >
					<a href="https://www.mi.com/shop/buy?product_id=19300">
						<img src="img/1.png" alt="" />
					</a>
				</li>
				<li >
					<a href="https://www.mi.com/shop/buy?product_id=10050036">
						<img src="img/second.jpg" alt="" />
					</a>
				</li>
				<li >
					<a href="https://www.mi.com/xiaomibuds4pro">
						<img src="img/3.png" alt="" />
					</a>
				</li>
				</ul>
					
				</div> <!-- 右边结束 -->
			</div>
		</div>
		<!-- 轮播图部分结束 -->
		<!-- 主要部分开始 -->
		<div class="main"> 
<div class="continer">
	<div class="head-box">
		<a href="https://www.mi.com/shop/buy?product_id=19288">
			<img src="img/4.webp" alt="" />
		</a>
	</div>
	<div class="main2"> <!-- 手机开始 -->
		<div class="box-hd">
			<h2 class="title">手机</h2>
			<div class="more">
				<a href="https://www.mi.com/shop/search?keyword=%E6%89%8B%E6%9C%BA">
					查看更多
				</a>
			</div>
		</div>
		<div class="clearfix">
			<div class="row">
			<div class="box-l"> <!-- 左边 -->
				<ul class="bx">
					<li >
						<a href="https://www.mi.com/shop/buy?product_id=19683">
							<img src="img/5.webp" alt="" />
						</a>
					</li>
				</ul>
			</div>
			<div class="box-r">  <!-- 右边 -->
				<ul class="bx2">
					<li>
						<a href="https://www.mi.com/shop/buy?product_id=19835">
							<div>
								<img src="img/6.webp" alt="" />
							</div>
							<h3 class="title">
								RedMi turbo3
							</h3>
							<p class="decs">
								性能旋风，席卷而来</p>
								<p class="price">
									<span>1899</span>元起
									<del>
										<span>1999</span>元
									</del>
								</p>
						</a>
					</li>
					<li>
						<a href="https://www.mi.com/shop/buy?product_id=19752">
							<div>
								<img src="img/7.webp" alt="" />
							</div>
							<h3 class="title">Xiaomi Civi 4 pro</h3>
							<p class="decs">徕卡光学Summilux镜头|5000万徕卡人像镜头</p>
						<p class="price">
							<span>2999</span>元起
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/8.webp" alt="" />
							</div>
							<h3 class="title">Xiaomi 14  Ultra</h3>
							<p class="decs">徕卡明星四摄|双星卫星通信|小米澎湃OS</p>
							<p class="price">
								<span>6499</span>元起
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/9.webp" alt="" />
							</div>
							<h3 class="title">Redmi K70 Pro</h3>
							<p class="decs">第三代骁龙8 年度旗舰平台</p>
							<p class="price">
								<span>2999</span>元起
								<del>
									<span>3299</span>元
								</del>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/10.webp" alt="" />
							</div>
							<h3 class="title">Red K70</h3>
							<p class="decs">第二代骁龙8 旗舰芯</p>
							<p class="price">
								<span>2199</span>元起
								<del>
									<span>2499</span>元
								</del>
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/11.webp" alt="" />
							</div>
							<h3 class="title">Redmi K70E</h3>
							<p class="decs">新一代旗舰焊门员</p>
							<p class="price">
								<span>1799</span>元起
								
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/12.webp" alt="" />
							</div>
							<h3 class="title">Xiaomi 14 pro</h3>
							<p class="decs">徕卡Summilux可变光圈镜头｜小米澎湃OS</p>
							<p class="price">
								<span>4599</span>元起
							
							</p>
						</a>
					</li>
					<li>
						<a href="#">
							<div>
								<img src="img/13.webp" alt="" />
							</div>
							<h3 class="title">Xiaomi 14</h3>
							<p class="decs">徕卡光学Summilux镜头｜小米澎湃OS｜第三代骁龙®8移动平台</p>
							<p class="price">
								<span>3999</span>元起
							</p>
						</a>
					</li>
				</ul>
			</div> <!-- 右边 -->
			</div>
		</div>
	</div> <!-- 手机结束 -->
	<div class="main2"> <!-- 智能穿戴开始 -->
		<div class="box-hd">
			<h2 class="title">智能穿戴</h2>
			<div class="more">
				<ul class="tab-list">
					<li class="tab-active">耳机</li>
					<li class>穿戴</li>
				</ul>
			</div>
			</div>
			<div class="clearfix">
				<div class="row">
					<div class="box-l"> <!-- 左边开始 -->
						<ul class="bx">
							<li>
								<a href="https://www.mi.com/shop/buy?product_id=19312">
									<img src="img/14.webp" alt="" />
								</a>
							</li>
						</ul>
					</div> <!-- 左边结束 -->
					<div class="box-r"> <!-- 右边开始 -->
					<ul class="bx2">
						
						<li>
							<a href="https://www.mi.com/shop/buy?product_id=20007">
								<div>
									<img src="img/15.webp" alt="" />
								</div>
								<h3 class="title"> Redmi Buds6活 力版 </h3>
								<p class="decs">14.2mm超大动圈 | 内置五种调音模式 | 30小时长续航</p>
								<p class="price">
									<span>99</span>元起
								</p>
							</a>
						</li>
						<li>
							<a href=" Xiaomi 开放式耳机">
								<div>
									<img src="img/16.webp" alt="" />
									
								</div>
								<h3 class="title">Xiaomi 开放式耳机</h3>
                            <p class="decs">舒适稳固佩戴｜超线性发声单元｜独立防漏音系统</p>
							<p class="price">
								<span>649</span>元起
								<del>
									<span>699</span>元
								</del>
							</p>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop/buy?product_id=19446">
								<div>
									<img src="img/17.webp" alt="" />
								</div>
								<h3 class="title">Redmi Buds 5 Pro</h3>
								<p class="decs">同轴双单元 旗舰音质 | 52dB/4kHz 旗舰降噪 | 49ms 超低延迟</p>
								<p class="price">
									<span>379</span>元起
									<del>
										<span>399</span>元
									</del>
								</p>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop/buy?product_id=19180">
								<div>
									<img src="img/18.webp" alt="" />
								</div>
								<h3 class="title">Red Buds 5</h3>
		                            <p class="decs">46dB深度降噪丨12.4mm镀钛动圈丨40小时超长续航</p>
									<p class="price">
										<span>179</span>元起
										<del>
											<span>199</span>元
										</del>
									</p>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/xiaomibuds4pro">
								<div>
									<img src="img/19.webp" alt="" />
								</div>
								<h3 class="title">Xioami buds 4pro</h3>
								<p class="decs">48dB智能动态降噪｜骨声纹通话降噪 | 独立空间音频</p>
								<p class="price">
									<span>799</span>元起
									<del>
										<span>1099</span>元
									</del>
								</p>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/redmibuds4pro">
								<div>
									<img src="img/20.webp" alt="" />
								</div>
								<h3  class="title">Redmi Buds 4 Pro</h3>
								<p class="decs">43dB 宽频降噪 | HiFi 高保真音质 | 59ms 游戏低延迟</p>
								<p class="price">
									<span>329</span>元起
									<del>
										<span>399</span>元
									</del>
								</p>
							</a>
						</li>
						<li>
							<a href="https://www.mi.com/shop/buy?product_id=18568">
								<div>
									<img src="img/30.webp" alt="" />
								</div>
								<h3 class="title">Redmi Buds 4活力版</h3>
								<p class="decs">12mm大动圈 | 28小时长续航 | 触控便捷操作</p>
								<p class="price">
									<span>89</span>元起
									<del>
										<span>99</span>元
									</del>
								</p>
								
							</a>
						</li>
						<div class="itme">
							<li>
								<a href="https://www.mi.com/shop/buy?product_id=14903">
									<div>
										<img src="img/31.webp" alt=""  />
									</div>
									<h3 class="title">Red mi Buds  3</h3>
									<p class="price">
										<span>129</span>元
									</p>
								</a>
							</li>
							<li>
								<a href="https://www.mi.com/shop/search?keyword=%E8%80%B3%E6%9C%BA">
								<div class="more">
									浏览更多
									<small>耳机</small>
								</div>
								</a>
							</li>
						</div>
					
					</ul>
						
					</div> <!-- 右边结束 -->
				</div>
			</div>
		
	</div><!-- 智能穿戴结束 -->
	<div class="main2"> <!-- 电脑开始 -->
	<div class="box-hd">
		<h2 class="title">笔记本|平板</h2>
		<div class="more ">
		<ul class="tab-list">
			<li class="tab-active">热门</li>
		</ul>
		</div>
	</div>
	<div class="clearfix">
		<div class="row">
			<div class="box-l"> <!-- 左边 -->
				<ul class="bx">
					<li>
						<a href="https://www.mi.com/shop/buy?product_id=10050070">
							<img src="img/33.webp" alt="" />
						</a>
					</li>
				</ul>
			</div> <!-- 左边 -->
			<div class="box-r"> <!-- 右边 -->
				<ul class="bx2">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<div class="itme">
						<li></li>
						<li></li>
					</div>
				</ul>
				
			</div> <!-- 右边 -->
		</div>
	</div>
	
		
	</div><!-- 电脑结束 -->
	<div class="main2">
		<div class="box-hd">
			<h2 class="title">家电</h2>
		</div>
	</div>
</div> <!-- contier结束 -->
			
		</div>
		<!-- 主要部分结束 -->
	</body>
</html>
		